<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background: #3CA992;
        }
        .logo {
            width: 392px;
            height: 150px;
            margin: 0 auto;
        }

        .logo img {
            width: 100%
        }
          p{
            font-family: '华文彩云';
            font-size: 18px;
          }
        .login {
            height: 200px;
            width: 200px;
            margin: 0 auto;
            /* border: 1px solid black; */
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            justify-content: space-around;
            /* font-family: '华文彩云'; */
        }

        #username {
            height: 30px;
            width: 200px;
            border-radius: 5px;
            outline: none;
            border: none;
        }

        #upas {
            height: 30px;
            width: 200px;
            border-radius: 5px;
            outline: none;
            border: none;
        }

        #btn {
            font-size: 30px;
            line-height: 40px;
            height: 40px;
            width: 80px;
            font-family: '华文彩云';

        }

        #btn2 {
            font-size: 30px;
            line-height: 40px;
            font-family: '华文彩云';
            height: 40px;
            width: 80px;
        }
        #random{
            line-height: 2;
        }
        #putrandom {
            height: 30px;
            width: 130px;
            border-radius: 5px;
            outline: none;
            border: none;
        }
        #userwarm{
            width: 100%;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="logo"><img src="../img/regimg.gif" alt=""></div>
    <div class="login">
       <p>用户名</p> 
       <input type="text" id="username" placeholder="请输入6-11位数字与字母组合">
    <p>密码</p>
        <input type="password" id="upas">
        <span id="userwarm"></span>
        <br>
        <span id="random"></span>
        <input type="text" id="putrandom">
        <button id="btn">注册</button>
    </div>




















    <script src="../js/tool.js"></script>
    <script>
        randomcode();

        $('#btn').onclick = function () {
            const username = $('#username').value;
            const userpwd = $('#upas').value;
            var txt = document.getElementById('putrandom').value;
            var random = document.getElementById('random').innerHTML;
            var random = random.toLocaleUpperCase();
            var txt = txt.toUpperCase();
            //numarr用来存储数字验证码，bigarr用来存储大写字母验证码，smallarr用来存储大写字母验证码
        //arr用来存储所有的验证码,random用来存放生成的验证码
        var numarr = [],
            bigarr = [],
            smallarr = [],
            arr = [];
            

        //给数字验证码赋值
        for (i = 0; i < 10; i++) {
            numarr[i] = i;
        }
        //给大写字母验证码赋值
        for (i = 65; i <= 90; i++) {
            bigarr.push(String.fromCharCode(i));
        }
        //给小写字母验证码赋值
        for (i = 97; i <= 122; i++) {
            smallarr.push(String.fromCharCode(i));
        }
        //给所有验证码赋值
        arr = arr.concat(numarr, bigarr, smallarr);
        str = arr.join('');
            //是否为空
            
            if (!username) {
                $('#userwarm').innerHTML = '用户名不能为空';
                $('#userwarm').style.color = 'red';
                return
            }
            //长度验证6-11位
            if (username.length < 6 || username.length > 11) {
                $('#userwarm').innerHTML = '长度需要在6-11位';
                $('#userwarm').style.color = 'red';
                return
            }
            //开头不能是数字
            if (!isNaN(username[0])) {
                $('#userwarm').innerHTML = '用户名首位不能是数字';
                $('#userwarm').style.color = 'red';
                return
            }
            //不能含有非法字符
            for (i = 0; i < username.length; i++) {
                if (str.indexOf(username[i]) == -1) {
                    console.log(str);
                    $('#userwarm').innerHTML = '用户名只能包含数字和字母';
                    $('#userwarm').style.color = 'red';
                    return
                }
            }
            $('#userwarm').innerHTML = '√';
            $('#userwarm').style.color = 'green';
               
            if (txt != random) {
                $('#userwarm').innerHTML = '验证码输入错误';
                $('#userwarm').style.color = 'red';
                return false;
            }



            if (username && userpwd) {
                ajax({
                        path: '../php/reg.php   ',
                        data: {
                            username,
                            userpwd
                        },
                        type: 'post',
                        successCB: (data) => {
                            console.log(data)
                            if (data.status) {
                                alert(data.msg)
                                location.href = 'login.html'
                            } else {
                                alert(data.msg)
                            }
                        }
                    }

                )
            }
        }
    </script>
</body>

</html>